// solt 基于 h(createVNode) 的第三个参数 children实现，
// 不同于 element类型节点，这是 component 类型的chilren 。
// 实现思路为 如果节点是 component 并且 children 有值，把插槽渲染到节点的 children中 
// 在这个demo 中表现为 把 defaultSolt 对象，传入到 Child 组件，并在 Child 组建的子节点中显示
import { h,createTextVNode } from "../../lib/guide-coco-mini-vue.esm.js";
import Child from "./Child.js";

export default {
	name: "App",
	setup() {
		return {}
	},

	render() {
		const app = h("div", {}, "你好,开启 F12 调试（我是根节点）");
		const headerSolt = ({childMsg}) =>  h('h2', {}, '我是插槽的节点,头部插槽-key: header' + childMsg);
		const footerSolt =  () => [h('h2', {}, '111我是插槽的节点,底部插槽-key: footer'), createTextVNode("我是纯纯的文本节点，没有任何标签，就是纯文字")];
		const defaultSolt =  () => h('h2', { style: 'color:green' }, '默认插槽-key: default');
		const child = h(Child, {}, {
			header: headerSolt,// 具名插槽-header
			footer:  footerSolt, // 具名插槽-footer
			default:  defaultSolt // 默认插槽，key = default 
		});  // 类型为 component ， 并且 children 有值

		return h("div", {}, [app, child]);
	},
};
